<template>
  <div class="setting">
    <header>
      <van-nav-bar title="个人中心" left-arrow @click-left="goback">
        <template #right>
          <van-icon name="search" size="20" />
        </template>
      </van-nav-bar>
    </header>
    <section>
      <div class="content">
        <van-cell title="地址管理" is-link @click="goPath"/>
        <van-cell title="经营证照" is-link />
        <van-cell title="协议规则" is-link />
        <van-cell title="小米商城用户协议" is-link />
        <van-cell title="小米商城隐私政策" is-link />
        <van-cell title="小米商城使用协议" is-link />
        <van-cell title="小米商城隐私政策" is-link />
      </div>
    </section>
    <footer>
      <div class="logout" @click="logout">退出账号</div>
    </footer>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  name: 'Setting',
  methods: {
    ...mapMutations(['loginOut']),
    goback () {
      this.$router.back()
    },
    logout () {
      this.loginOut()
      this.$router.back()
    },
    goPath () {
      this.$router.push('/path')
    }
  }
}
</script>
<style lang="scss" scoped>
.setting {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  header {
    background-color: #eee;
    .van-nav-bar {
      background-color: #eee;
    }
    ::v-deep .van-nav-bar .van-icon {
      color: #333;
      font-size: 0.533333rem;
    }
  }
  section {
    .content {
      ::v-deep .van-cell:last-child {
        border-bottom: 1px solid #eee;
      }
    }
  }
  footer {
    position:fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1.333333rem;
    background-color: #eee;
    .logout {
      width: 100%;
      line-height: 1.173333rem;
      border-bottom: 1px solid #eee;
      font-size: .426667rem;
      text-align: center;
      color: #333;
      background-color: #eee;
    }
  }
}
</style>
